<template>
    <div class="area-list">
        <div class="area-list-card">
            <div class="area-list-head">
                <Row :gutter="5">
                    <Col span="4">
                        <Input clearable v-model="searchData.areaName" placeholder="地区名称" type="text"></Input>
                    </Col>
                    <Col span="18">
                        <ButtonGroup style="float: right">
                            <Button :loading="search_loading" @click="searchGetList" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                            <Button type="primary" @click="modal3 = true; statForm()"><Icon type="plus-round"></Icon> 新增地区</Button>
                            <Button type="primary" @click="dellAll"><Icon type="trash-b"></Icon> 批量删除</Button>
                        </ButtonGroup>
                    </Col>
                    <Col span="2">
                        <div class="paixuCon">
                            <div>
                                <a>排序</a>
                            </div>
                            <div>
                                <i-switch v-model="isswitch" size="large">
                                    <span slot="open">开启</span>
                                    <span slot="close">关闭</span>
                                </i-switch>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
            <DragableTable
                    v-if="isDrage"
                    v-model="data"
                    :columns-list="columns"
                    height="680"
                    @on-end="handleOnend1"
                    @on-selection-change="selectChange"
            ></DragableTable>
            <i-table v-else @on-selection-change="selectChange" height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px 0px;">
                <Row :gutter="8">
                    <Col span="20"><Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[50,60,70,80,90]"></Page></Col>
                    <Col span="4"><Button type="primary" :disabled="parentIdArray.length<=1" style="float: right" @click="backPage">返回上一级</Button></Col>
                </Row>
            </div>
        </div>
        <!--删除弹出-->
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
        <!--新增地址-->
        <Modal v-model="modal3" width="450">
            <p slot="header" style="text-align:center">
                <a><Icon type="plus-round"></Icon> 新增地区</a>
            </p>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="是否显示:">
                    <i-switch v-model="formValidate.switch" size="large">
                        <span slot="open">显示</span>
                        <span slot="close">隐藏</span>
                    </i-switch>
                </FormItem>
                <FormItem label="地区名称:" prop="areaName">
                    <Input v-model="formValidate.areaName" placeholder="请输入地区名称"></Input>
                </FormItem>
                <FormItem label="排序号:"  prop="num">
                    <Input number v-model="formValidate.num" placeholder="请输入排序号"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="addArea">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import DragableTable from '../../../tables/components/dragableTable.vue';
    export default {
        name: "area-list",
        components: {
            DragableTable
        },
        data(){
            const validateNum = (rule, value, callback) => {
                if (value==="") {
                    return callback(new Error('排序号不能为空'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return{
                columns:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '地区名称',
                        key: 'areaname',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.isAreaName){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },params.row.areaname
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.isAreaName=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Input",
                                            {
                                                props: {
                                                    value:params.row.areaname
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    input:(event)=>{
                                                        params.row.areaname=event
                                                    }
                                                }
                                            }
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round',
                                            },
                                            on: {
                                                click: () => {
                                                    if(params.row.areaname===""){
                                                        this.$Message.warning("地区名称不能为空")
                                                    }else{
                                                        this.changeInfo(params.row.areaid,params.row.areaname,params.row.isshow,params.row.areasort)
                                                    }
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    {
                        title: '排序',
                        key: 'areasort',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.isSort){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },params.row.areasort
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.isSort=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Input",
                                            {
                                                props: {
                                                    value:params.row.areasort
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    input:(event)=>{
                                                        params.row.areasort=event
                                                    }
                                                }
                                            }
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round',
                                            },
                                            on: {
                                                click: () => {
                                                    if(params.row.areasort===""){
                                                        this.$Message.warning("排序号不能为空")
                                                    }else{
                                                        this.changeInfo(params.row.areaid,params.row.areaname,params.row.isshow,params.row.areasort)
                                                    }
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    {
                        title: '地区ID',
                        key: 'areaid',
                        align:"center",
                    },
                    {
                        title: '是否显示',
                        key: 'isshow',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.isShow){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },[h("div",
                                                [
                                                    h("Icon",{
                                                        props:{type: params.row.isshow==1?'eye':'eye-disabled'}
                                                    }),
                                                    h("span",params.row.isshow==1?' 显示':' 隐藏')
                                                ]
                                            )]
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.isShow=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Select",
                                            {
                                                props: {
                                                    value:params.row.isshow
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    "on-change":(event)=>{
                                                        params.row.isshow=event
                                                    }
                                                }
                                            },
                                            [
                                                h("Option",{
                                                    props: {
                                                        value:"1"
                                                    },
                                                },"显示"),
                                                h("Option",{
                                                    props: {
                                                        value:"0"
                                                    },
                                                },"隐藏")
                                            ]
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round'
                                            },
                                            on: {
                                                click: () => {
                                                    this.changeInfo(params.row.areaid,params.row.areaname,params.row.isshow,params.row.areasort)
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        disabled:params.row.areatype==="2"?true:false
                                    },
                                    on: {
                                        click: () => {
                                            this.parentId = params.row.areaid
                                            this.parentIdArray.push(this.parentId)
                                            console.log(this.parentIdArray)
                                            this.getAreaList()
                                        }
                                    }
                                },"查看"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.doId = params.row.areaid
                                            this.modal2 = true
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:50,
                searchData:{
                    areaName:"",//地区名称
                },
                search_loading:false,
                modal2:false,
                modal_loading:false,
                doId:"",//删除操作的id
                guoxuan:[],
                isswitch:false,
                isDrage:false,
                modal3:false,
                formValidate:{
                    areaName:"",//地区地址
                    switch:true,
                    num:"",
                },
                ruleValidate: {
                    areaName: [
                        { required: true, message: '请输入地区名称', trigger: 'blur' },
                    ],
                    num: [
                        { required: true,validator: validateNum, trigger: 'blur' }
                    ]
                },
                parentId:0,//一级
                parentIdArray:[0],//历史id记录
            }
        },
        watch:{
            isswitch(val){
                if(val){
                    if(this.searchData.areaName!=""){
                        this.$Message.warning("排序功能需同级地区")
                        this.$nextTick(()=>{this.isswitch = false})
                    }else{
                        this.isDrage=true
                        this.guoxuan = []
                        this.columns.splice(7,1,
                            {
                                title: '拖拽',
                                key: 'drag',
                                width: 90,
                                align: 'center',
                                render: (h) => {
                                    return h(
                                        'Icon',
                                        {
                                            props: {
                                                type: 'arrow-move',
                                                size: 24
                                            }
                                        }
                                    );
                                }
                            })
                    }
                }else{
                    this.columns.splice(7,1)
                    this.guoxuan = []
                    this.isDrage=false
                }
            }
        },
        activated(){
            this.getAreaList()
        },
        methods:{
            getAreaList(){
                this.getJsonData("Areas/getAllAreasForAdmin",{
                    num:this.page_con,
                    page:this.index,
                    areaName:this.searchData.areaName,
                    parentId:this.parentId
                },true)
                    .then((res)=>{
                        this.guoxuan = []
                        this.data=res.data.map((value)=>{
                            this.$set(value,"isAreaName",false)
                            this.$set(value,"isSort",false)
                            this.$set(value,"isShow",false)
                            return value
                        })
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            changePage(n){
                this.index=n
                this.getAreaList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getAreaList()
            },
            searchGetList(){
                if(this.searchData.areaName!=""){
                    this.isswitch = false
                }
                this.search_loading=true
                this.index=1
                this.getAreaList()
            },
            //修改信息
            changeInfo(id,name,isShow,sort){
                this.getJsonData("Areas/updateAreas",{
                    areaId:id,
                    areaName:name,
                    isShow:isShow,
                    areaSort:sort,
                },true)
                    .then((res)=>{
                        this.$Message.success("修改成功")
                        this.getAreaList()
                    })
                    .catch(()=>{
                        this.getAreaList()
                    })
            },
            //多选删除
            selectChange(selection){
                this.guoxuan = selection
                this.doId = selection.map((value)=>value.areaid).join(",")
            },
            //批量删除
            dellAll(){
                if(this.guoxuan.length!=0){
                    this.modal2 = true
                    console.log(this.doId)
                }else{
                    this.$Message.warning("请勾选地区")
                }
            },
            //确认删除
            del(){
                this.modal_loading = true;
                this.getJsonData("Areas/deleteAreas",{ids:this.doId},true)
                    .then((res)=>{
                        this.getAreaList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('删除成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            //拖拽结果
            handleOnend1 () {
                let arryData = this.data.map((item,key,arr)=>{
                    return `${item.areaid}@${key}`
                }).join("-")
                this.getJsonData("Areas/changeSort",{
                    str:arryData,
                },true)
                    .then((res) => {
                        this.getAreaList()
                    }).catch(res=>{
                    this.getAreaList()
                })
            },
            //新增地址
            addArea(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                       this.sureAddArea()
                    }
                })
            },
            //验证通过是添加
            sureAddArea(){
                this.modal_loading = true;
                this.getJsonData("Areas/addAreas",{
                    areaName:this.formValidate.areaName,
                    isShow:this.formValidate.switch?1:0,
                    areaSort:this.formValidate.num,
                },true)
                    .then((res)=>{
                        this.getAreaList()
                        this.modal_loading = false;
                        this.modal3 = false;
                        this.$Message.success('新增成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal3 = false;
                })
            },
            statForm(){
                this.formValidate.areaName = ""
                this.formValidate.switch = true
                this.formValidate.num = ""
            },
            //返回上一级
            backPage(){
                this.parentIdArray.pop()
                this.parentId = this.parentIdArray[this.parentIdArray.length-1]
                this.getAreaList()
                console.log(this.parentIdArray)
            }
        },
    }
</script>

<style lang="less">
    @import "area-list";
</style>